<html>
<head>
    <title>Timeline clustering demo</title>

    <style type="text/css">
        body {
            font-size: 10pt;
            font-family: verdana, sans, arial, sans-serif;
            color: #4d4d4d;
        }
    </style>

    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">

    <script type="text/javascript">
        var timeline;
        var data;

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create a JSON data table
            data = [];

            // an item every month
            var i, iMax = 1000;
            var num = 0;
            var date = new Date(2012, 0, 1);
            for (i = 0; i < iMax; i++) {
                date.setMonth(date.getMonth() + 1);
                data.push({
                    "start": new Date(date),
                    "content": "item " + num
                });
                num++;
            }

            // an item every day
            date = new Date(2012, 3, 1);
            for (i = 0; i < iMax; i++) {
                date.setDate(date.getDate() + 1);
                data.push({
                    "start": new Date(date),
                    "content": "item " + num
                });
                num++;
            }

            // an item every hour
            date = new Date(2012, 6, 1);
            for (i = 0; i < iMax; i++) {
                date.setHours(date.getHours() + 1);
                data.push({
                    "start": new Date(date),
                    "content": "item " + num
                });
                num++;
            }

            // items on the same spot
            date = new Date(2012, 9, 1);
            for (i = 0; i < iMax; i++) {
                data.push({
                    "start": new Date(date),
                    "content": "item " + num
                });
                num++;
            }

            // specify options
            var options = {
                'width':  '100%',
                'height': '300px',
                'start': new Date(2012, 0, 1),
                'end': new Date(2012, 11, 31),
                'cluster': true,
                // 'axisOnTop': true,
                'editable': true
            };

            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'));

            // Draw our timeline with the created data and options
            timeline.draw(data, options);
        }

    </script>
</head>

<body onload="drawVisualization();">
    <h1>Timeline - clustering demo</h1>
    <p>
        When too much items are being displayed, Timeline will smartly cluster
        the items together. This both:
    </p>

    <ul>
        <li>keeps the amount of displayed information limited for the user,</li>
        <li>and prevents the browser from getting overloaded</li>
    </ul>

    <div id="mytimeline"></div>

</body>
</html>
